<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="vue-css-demo.css" />
<body>

   <div id="app">
       <table>
           <thead>
               <tr>
                   <th>ID</th>
                   <th>商品名</th>
                   <th>单价</th>
                   <th>数量</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
           <tr v-for="(item,index) in books">
               <td>{{item.id}}</td>
               <td>{{item.name}}</td>
               <td>{{item.price | showPrice }}</td>
               <td>
                   <button v-bind:disabled="item.num <=1" v-on:click="decrement(index)">-</button>
                   {{item.num}}
                   <button v-on:click="increment(index)">+</button>
               </td>
               <td><button v-on:click="removeOne(index)">delete</button></td>
           </tr>
           </tbody>
       </table>
       <div>总价：{{getTotal}}</div>
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="vue-js-demo.js"></script>
</html>